<template>
  <div style="width: 100px; height: 100px;">
    <el-upload
    class="avatar-uploader"
    :before-upload="beforeAvatarUpload"
  >
    <el-button><el-icon  class="avatar-uploader-icon"><Plus /></el-icon>上传</el-button>
  </el-upload>

    <img :src="imageUrl" class="avatar" />

  <div>上传图片的路径:{{imageUrl}}</div>


  </div>
</template>

<script setup lang="ts">
import { uploadFile } from '@/utils/tx-upload';
import { UploadRawFile } from 'element-plus';
import { ref } from 'vue';

const imageUrl = ref('')
const beforeAvatarUpload = (rawFile: UploadRawFile) => { 
  uploadFile(rawFile, {
    schedule: (res) => { 
    console.log(res,'上传进度')
    },
    success: (res) => { 
      console.log(res, '上传成功')
      imageUrl.value = 'http://'+res.Location
    },
    error: (err) => { 
      console.log(err,'上传失败')
    }
  })
}
</script>

<style scoped>

</style>